<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui">

<ui:include src="/WEB-INF/includes/head.xhtml">
	<ui:param name="pageTitle" value="Edit trips" />
</ui:include>
<h:body>
	<ui:include src="/WEB-INF/includes/menu.xhtml" />
	<h1>Edit trips</h1>

	<h:form id="form1">

		<!-- Error messages -->
		<p:messages id="messages" closable="true" autoUpdate="true" />

		<p:panelGrid styleClass="noBorders">
			<p:row>
				<p:column>
					<h:outputLabel for="routeCombobox" value="Route" />
				</p:column>
				<p:column>
					<p:selectOneMenu id="routeCombobox"
						value="#{editTrips.selectedRoute}" required="true"
						requiredMessage="Please select route">
						<f:selectItem itemLabel="-- Select route --" itemValue="" />
						<f:selectItems value="#{editTrips.routes}" var="route"
							itemValue="#{route}" />
					</p:selectOneMenu>
				</p:column>
				<p:column>
					<h:outputLabel for="seatsNumber" value="Seats" />
				</p:column>
				<p:column>
					<p:spinner id="seatsNumber" value="#{editTrips.seatsNumber}" min="0"
						max="10000" />
				</p:column>
				<p:column>
					<h:outputLabel for="startDate" value="Start date &amp; time" />
				</p:column>
				<p:column>
					<p:calendar id="startDate" value="#{editTrips.startDate}"
						pattern="yyyy-MM-dd HH:mm" mindate="#{editTrips.currentDate}" />
				</p:column>
				<p:column>
					<p:commandButton value="Add">
						<f:ajax listener="#{editTrips.add}" execute="routeCombobox seatsNumber startDate"
							update=":form2:tripsTable" render=":form2:tripsTable" />
					</p:commandButton>
				</p:column>
			</p:row>
			<p:row>
				<p:column>
					<p:spacer height="50" />
				</p:column>
			</p:row>
		</p:panelGrid>

	</h:form>

	<h:form id="form2">
		<p:contextMenu for="tripsTable">
			<p:menuitem value="Delete" update="tripsTable" render="tripsTable"
				icon="ui-icon-close" actionListener="#{editTrips.delete}" />
		</p:contextMenu>

		<!-- Schedule table -->
		<p:dataTable id="tripsTable" var="trip" value="#{editTrips.trips}"
			rowKey="#{trip.id}" selection="#{editTrips.tripToDelete}"
			selectionMode="single" paginator="true" rows="10"
			paginatorPosition="bottom">
			<p:column headerText="Start">
				<h:outputText value="#{trip.start}" />
			</p:column>
			<p:column headerText="Trip ID">
				<h:outputText value="#{trip.id}" />
			</p:column>
			<p:column headerText="Route">
				<h:outputText value="#{trip.routeName}" />
			</p:column>
			<p:column headerText="Total seats">
				<h:outputText value="#{trip.seats}" />
			</p:column>
		</p:dataTable>
	</h:form>

</h:body>
</html>